﻿<template>
  <div>
    <!-- 文本输入 -->
    <p>文本输入框：使用 v-model 绑定文本输入框的值到 message。</p>
    <input v-model="message" placeholder="edit me" />
    <p>Message is: {{ message }}</p>
    <br/>

    <!-- 多行文本 -->
    <p>多行文本框：使用 v-model 绑定多行文本框的值到 multiLineMessage。</p>
    <textarea v-model="multiLineMessage" placeholder="add multiple lines"></textarea>
    <p>Multiline message is: {{ multiLineMessage }}</p>
    <br/>

    <!-- 复选框 -->
    <p>复选框：使用 v-model 绑定单个复选框的状态到 checked。</p>
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>
    <br/>

    <!-- 多个复选框绑定到同一个数组 -->
    <p>复选框数组：使用 v-model 绑定多个复选框到同一个数组 checkedNames。</p>
    <div>Checked names: {{ checkedNames }}</div>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br/>

    <!-- 单选按钮 -->
    <p>单选按钮：使用 v-model 绑定一组单选按钮到 picked。</p>
    <div>Picked: {{ picked }}</div>
    <input type="radio" id="one" value="One" v-model="picked" />
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked" />
    <label for="two">Two</label>
    <br/>

    <!-- 下拉选择 -->
    <p>下拉选择框：使用 v-model 绑定下拉选择框的选中值到 selected。</p>
    <div>Selected: {{ selected }}</div>
    <select v-model="selected">
      <option disabled value="">Please select one</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <br/>

    <!-- 使用 .lazy 修饰符 -->
    <p>.lazy 修饰符：在 change 事件后更新数据。</p>
    <input v-model.lazy="lazyMessage" />
    <p>Lazy message: {{ lazyMessage }}</p>
    <br/>

    <!-- 使用 .number 修饰符 -->
    <p>.number 修饰符：将用户输入转换为数值类型。</p>
    <input v-model.number="age" type="number" />
    <p>Age: {{ age }}</p>
    <br/>

    <!-- 使用 .trim 修饰符 -->
    <p>.trim 修饰符：去除用户输入的首尾空格。</p>
    <input v-model.trim="trimmedMessage" />
    <p>Trimmed message: {{ trimmedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      multiLineMessage: '',
      checked: false,
      checkedNames: [],
      picked: '',
      selected: '',
      lazyMessage: '',
      age: 0,
      trimmedMessage: ''
    }
  }
}
</script>
